<template>
  <div class="post-article">
    <el-card class="post-card">
      <el-form ref="postForm" :model="post" label-width="100px" class="post-form">
        <el-form-item label="标题">
          <el-input v-model="title" placeholder="请输入标题" type="textarea" autosize class="custom-input"></el-input>
        </el-form-item>
        <el-form-item label="照片">
          <el-upload
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            :on-change="handleChange"
            :file-list="fileList">
            <i slot="default" class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitPost">发表</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import friendsApi from '@/api/friends'
import messageUtil from '@/utils/messageUtil'

export default {
  data() {
    return {
      title: '',
      fileList: [],
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false
    }
  },
  methods: {
    submitPost() {
      // 点击提交按钮时触发，将上传的文件列表发送到后端
      const formData = new FormData()
      // 将标题和文件列表添加到 FormData
      formData.append('title', this.title)
      this.fileList.forEach(file => {
        formData.append('files', file.raw)
      })
      console.log(this.title)
      friendsApi.showPost(formData).then(response => {
        if (response.message === 'success') {
          messageUtil.success(this, '发表成功')
        } else {
          messageUtil.fail(this, response.message)
        }
      })
    },
    handleChange(file, fileList) {
      // 选择文件后的回调函数
      this.fileList = fileList
    },
  }
}
</script>

<style scoped>
.custom-input {
  width: 300px; /* 设置输入框的宽度 */
}

</style>
